<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>报告单</title>
	<link rel="stylesheet" type="text/css" href="css/report.css"> </link>
</head>
<body>
	  <!-- header -->
    <div class="down-head">
      <img src="img/green_logo.png"  />
    </div>
    <!-- checkscore-wrapper里面存放每一个学生的报告 -->
    <mark>富民，这里是开始是一个学生的所有报告，开发后删除</mark>
	  <div class="checkscore-wrapper">
      <div class="checkscore-content">
        <!-- 标题和学生信息 -->
        <div class="info-content">
          <h1 class="title">期中考试报告单</h1>
          <div class="info-list">
            <ul>
              <li>
                <span>年级:</span>
                <b>5年级</b>
              </li>
              <li>
                <span>班级:</span>
                <b>3班</b>
              </li>
              <li>
                <span>姓名:</span>
                <b>阿奎罗</b>
              </li>
              <li>
                <span>学号:</span>
                <b>201122133100422011221331004220112213310042</b>
              </li>
            </ul>
          </div>
        </div>
        <!-- 科目得分分析 -->
        <div class="subject-wrapper">
          <!-- 雷达图  -->
          <div class="radar-wrapper">
            <div class="title">
              <div class="left-title">科目实际得分雷达图</div>
              <div class="right-title">科目实际得分</div>
            </div>
            <div class="rader-content">
              <div class="charts" id="radarChart"></div>
              <div class="score-num">
                <div class="score-num-content">
                  <div class="border"></div>
                  <div class="nums">
                    <ul>
                      <li>
                        <div>
                          <span>语文</span>
                          <b>115</b>
                        </div>
                        <div>
                          <span>化学</span>
                          <b>115</b>
                        </div>
                        <div>
                          <span>政治</span>
                          <b>115</b>
                        </div>
                      </li>
                      <li>
                        <div>
                          <span>数学</span>
                          <b>102</b>
                        </div>
                        <div>
                          <span>生物</span>
                          <b>88</b>
                        </div>
                        <div>
                          <span>地理</span>
                          <b>65</b>
                        </div>
                      </li>
                      <li>
                        <div>
                          <span>英语</span>
                          <b>88</b>
                        </div>
                        <div>
                          <span>物理</span>
                          <b>88</b>
                        </div>
                        <div>
                          <span>历史</span>
                          <b>115</b>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 科目实际得分与班级平均分对比图 -->
          <div class="really-wrapper">
            <div class="title">科目实际得分与班级平均分对比图</div>
            <div class="really-content">
              <div id="reallyChart"></div>
            </div>
          </div>
          <!-- 科目成绩 -->
          <div class="score-wrapper">
            <div class="score-border"></div>
            <div class="name-content">
              周杰伦，您的本次考试成绩---
            </div>
            <div class="subject-score-content">
              <ul>
                <li class="subject-score-item">语文124分，高于班级平均分23分</li>
                <li class="subject-score-item down-score">数学124分，低于班级平均分23分</li>
                <li class="subject-score-item">英语124分，高于班级平均分23分</li>
                <li class="subject-score-item down-score">历史124分，低于班级平均分23分</li>
                <li class="subject-score-item">地理124分，高于班级平均分23分</li>
                <li class="subject-score-item">政治124分，高于班级平均分23分</li>
                <li class="subject-score-item">物理124分，高于班级平均分23分</li>
                <li class="subject-score-item down-score">化学124分，低于班级平均分23分</li>
                <li class="subject-score-item">生物124分，高于班级平均分23分</li>
              </ul>
            </div>
          </div>
          <!-- 百分比得分 -->
          <div class="percent-wrapper">
            <div class="title">百分比得分</div>
            <div class="percent-content">
              <div id="percentChart"></div>
            </div>
          </div>
           <!-- 科目成绩 -->
          <div class="score-wrapper">
            <div class="percent-border"></div>
            <div class="name-content">
              周杰伦，您的本次考试成绩---
            </div>
            <div class="subject-score-content">
              <ul>
                <li class="subject-score-item">语文124分，高于班级平均分23分</li>
                <li class="subject-score-item down-score">数学124分，低于班级平均分23分</li>
                <li class="subject-score-item">英语124分，高于班级平均分23分</li>
                <li class="subject-score-item down-score">历史124分，低于班级平均分23分</li>
                <li class="subject-score-item">地理124分，高于班级平均分23分</li>
                <li class="subject-score-item">政治124分，高于班级平均分23分</li>
                <li class="subject-score-item">物理124分，高于班级平均分23分</li>
                <li class="subject-score-item down-score">化学124分，低于班级平均分23分</li>
                <li class="subject-score-item">生物124分，高于班级平均分23分</li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 这里开始循环每一个科目的小题得分和知识点得分 -->
        <mark>富民，这里是一个学生的一个科目的小题得分和知识点得分,开发后删除</mark>
        <ul>
          <!-- 一个科目一个li -->
          <li>
            <!-- 科目名称 -->
            <div class="subject-title">
              <b>语文</b>
            </div>
            <!-- 小题得分分析 -->
            <div class="question-wrapper">
              <div class="question-content margin-top-20">
                <!-- 图表  -->
                <div class="question-list">
                  <div class="title">
                    <div class="left-title">小题得分统计</div>
                    <div class="right-title">小题失分统计</div>
                  </div>
                  <!-- 图表 -->
                  <div class="rader-content">
                  <ul>
                      <li>
                        <div class="score-charts" id="getScore"></div>
                      </li>
                      <li>
                        <div class="score-charts" id="loseScore"></div>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- 小题文本说明 -->
                <div class="text-list margin-top-20">
                  <div class="name">陈奕迅，您本次考试，语文小题得分、失分统计如下---</div>
                  <ul class="question-name-list">
                    <li>
                      <span>1:</span>
                      <span>第1小题得分10分,</span>
                      <span>失分0分</span>
                    </li>
                    <li class="down-score">
                      <span>1:</span>
                      <span>第1小题得分10分,</span>
                      <span>失分0分</span>
                    </li>
                    <li>
                      <span>1:</span>
                      <span>第1小题得分10分,</span>
                      <span>失分0分</span>
                    </li>
                    <li>
                      <span>1:</span>
                      <span>第1小题得分10分,</span>
                      <span>失分0分</span>
                    </li>
                    <li class="down-score">
                      <span>1:</span>
                      <span>第1小题得分10分,</span>
                      <span>失分0分</span>
                    </li>
                    <li>
                      <span>1:</span>
                      <span>第1小题得分10分,</span>
                      <span>失分0分</span>
                    </li>
                    <li class="down-score">
                      <span>1:</span>
                      <span>第1小题得分10分,</span>
                      <span>失分0分</span>
                    </li>
                    <li>
                      <span>1:</span>
                      <span>第1小题得分10分,</span>
                      <span>失分0分</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- 知识点得分分析 -->
            <div class="konwlwdge-wrapper">
              <div class="question-content margin-top-20">
                <!-- 图表  -->
                <div class="title">知识点得分分析图</div>
                <!-- 这里的高度动态设置 -->
                <div class="line-chart-content" id="knowledgeChart"></div>
              </div>
              <!-- 知识点文本说明 -->
              <div class="text-list margin-top-20">
                <div class="name">陈奕迅，您本次考试，语文知识点得分、失分统计如下---</div>
                <ul class="question-name-list">
                  <li>
                    <span>1:</span>
                    <span>第1知识点得分10分,</span>
                    <span>失分0分</span>
                  </li>
                  <li class="down-score">
                    <span>1:</span>
                    <span>第1知识点得分10分,</span>
                    <span>失分0分</span>
                  </li>
                  <li>
                    <span>1:</span>
                    <span>第1知识点得分10分,</span>
                    <span>失分0分</span>
                  </li>
                  <li>
                    <span>1:</span>
                    <span>第1知识点得分10分,</span>
                    <span>失分0分</span>
                  </li>
                  <li class="down-score">
                    <span>1:</span>
                    <span>第1知识点得分10分,</span>
                    <span>失分0分</span>
                  </li>
                  <li>
                    <span>1:</span>
                    <span>第1知识点得分10分,</span>
                    <span>失分0分</span>
                  </li>
                  <li class="down-score">
                    <span>1:</span>
                    <span>第1知识点得分10分,</span>
                    <span>失分0分</span>
                  </li>
                  <li>
                    <span>1:</span>
                    <span>第1知识点得分10分,</span>
                    <span>失分0分</span>
                  </li>
                </ul>
              </div>
              <!-- 一个科目结束 -->
            </div>
          </li>
        </ul>
        <!-- 一个科目的小题得分和知识点得分 end-->
      </div>
    </div>
    <mark>富民，这里是开始是一个学生的所有报告结束，开发后删除</mark>
	<!-- js -->
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<!-- 自定义方法 -->
	<script type="text/javascript">
		/*雷达图*/
		function drawRadarCharts() {
        var radarChart = echarts.init(document.getElementById('radarChart'));
        // 实现eachrts不刷新就能自适应屏幕
        window.onresize = radarChart.resize;
        radarChart.setOption({
          color: ['#00c4c0'],
          tooltip: {},
          legend: {
          },
          radar: {
              shape: '',
              indicator: [
                 { name: '语文', max: 150},
                 { name: '数学', max: 150},
                 { name: '英语', max: 150},
                 { name: '化学', max: 150},
                 { name: '物理', max: 150},
                 { name: '生物', max: 150}
              ]
          },
          series: [{
              name: '各科目得分',
              type: 'radar',
              symbolSize: 10,//拐点大小
              itemStyle: {
                  normal: {
                      lineStyle:{
                          width: 4 // 线宽
                      },
                      areaStyle: {
                          type: 'default'
                      }
                  }
              },
              data : [
                  {
                      value : [112, 99, 134, 100, 112, 78],
                      name : '各科目得分'
                  }
              ]
          }]
        })
      }
      /*科目实际得分*/
      function drawReallyCharts() {
        var reallyChart = echarts.init(document.getElementById('reallyChart'));
        // 实现eachrts不刷新就能自适应屏幕
        window.onresize = reallyChart.resize;
        reallyChart.setOption({
          color: ['#00c4c0', '#7968a8', '#ffaa35'],
          title: {
              // text: '科目实际得分与班级平均分对比图',
              // subtext: '副标题'
          },
          // 设置是否撑满指定宽高
          grid:{
              x: 60,
              y: 40,
              x2: 30,
              y2: 40,
              borderWidth: 10
          },
          tooltip: {
              trigger: 'axis',
              axisPointer : {            
                  type : 'shadow'    
              }
          },
          legend: {
              data:['科目得分','班级平均分','科目平均分']
          },
          toolbox: {
              show: true,
              feature: {
                  dataView: {readOnly: false},
                  magicType: {type: ['line', 'bar']},
                  restore: {},
                  saveAsImage: {}
              }
          },
          xAxis:  {
              type: 'category',
              boundaryGap: false,
              data: ['语文','数学','英语','物理','化学','生物','历史']
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                  formatter: '{value} 分'
              }
          },
          series: [
            {
                name:'科目得分',
                type:'line',
                symbolSize: 10,//拐点大小
                itemStyle: {
                    normal: {
                        lineStyle:{
                            width: 4//折线宽度
                        }
                    }
                },
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'班级平均分',
                type:'line',
                symbolSize: 10,//拐点大小
                itemStyle: {
                    normal: {
                        lineStyle:{
                            width: 4//折线宽度
                        }
                    }
                },
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'科目平均分',
                type:'line',
                symbol:'arrow', //拐点样式
                symbolSize: 13,//拐点大小
                itemStyle: {
                    normal: {
                        lineStyle:{
                            width: 4,//折线宽度
                            type:'dotted'//虚线
                        }
                    }
                },
                data:[150, 232, 201, 154, 190, 330, 410]
            },
          ]
        })
      }
      /*百分比得分*/
      function drawPercentCharts() {
        var percentChart = echarts.init(document.getElementById('percentChart'));
        // 实现eachrts不刷新就能自适应屏幕
        window.onresize = percentChart.resize;
        percentChart.setOption({
          color: ['#00c4c0', '#7968a8', '#ffaa35'],
          title: {
              // text: '科目实际得分与班级平均分对比图',
              // subtext: '副标题'
          },
          // 设置是否撑满指定宽高
          grid:{
              x: 60,
              y: 40,
              x2: 30,
              y2: 40,
              borderWidth: 10
          },
          tooltip: {
              trigger: 'axis',
              axisPointer : {            
                  type : 'shadow'    
              }
          },
          legend: {
              data:['科目得分','班级平均分','科目平均分']
          },
          toolbox: {
              show: true,
              feature: {
                  dataView: {readOnly: false},
                  magicType: {type: ['line', 'bar']},
                  restore: {},
                  saveAsImage: {}
              }
          },
          xAxis:  {
              type: 'category',
              boundaryGap: false,
              data: ['语文','数学','英语','物理','化学','生物','历史']
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                  formatter: '{value} 分'
              }
          },
          series: [
            {
                name:'科目得分',
                type:'line',
                symbolSize: 10,//拐点大小
                itemStyle: {
                    normal: {
                        lineStyle:{
                            width: 4//折线宽度
                        }
                    }
                },
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'班级平均分',
                type:'line',
                symbolSize: 10,//拐点大小
                itemStyle: {
                    normal: {
                        lineStyle:{
                            width: 4//折线宽度
                        }
                    }
                },
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'科目平均分',
                type:'line',
                symbol:'arrow', //拐点样式
                symbolSize: 13,//拐点大小
                itemStyle: {
                    normal: {
                        lineStyle:{
                            width: 4,//折线宽度
                            type:'dotted'//虚线
                        }
                    }
                },
                data:[150, 232, 201, 154, 190, 330, 410]
            },
          ]
        })
      }
      /*小题得分分析*/
      function drawQuestionChart(id) {
          var myCharts = echarts.init(document.getElementById(id));
          window.onresize = myCharts.resize;
          myCharts.setOption({
            color: ['#00c4c0', '#2c8dea', '#08d05d', '#8f7fb5', '#ff76a2', '#ffa733', '#d05c8c'],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}得分: {c} <br/> 得分占比: {d}%"
            },
            legend: {

            },
            series: [
                {
                    name:'小题得分统计',
                    type:'pie',
                    radius: ['50%', '70%'],
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data:[
                        {value:10, name:'第1小题', selected:true},
                        {value:3, name:'第2小题'},
                        {value:13, name:'第3小题'},
                        {value:34, name:'第4小题'},
                        {value:22, name:'第5小题'},
                        {value:10, name:'第6小题'},
                        {value:3, name:'第7小题'},
                        {value:13, name:'第8小题'},
                        {value:34, name:'第9小题'},
                        {value:22, name:'第10小题'}
                    ]
                }
            ]
          })
      }
      drawQuestionChart('getScore');
      drawQuestionChart('loseScore');
      drawRadarCharts();
      drawReallyCharts();
      drawPercentCharts();

      /*
       *知识点
      */
      var list = ['知识点知识点知识点知识点知识点知识点','知识点','知识点','知识点','知识点','知识点','知识点','知识点','知识点'];
      /*知识点得分*/
      function drawKnowledgeChart() {
          var knowledgeChart = echarts.init(document.getElementById('knowledgeChart'));
          window.onresize = knowledgeChart.resize;
          knowledgeChart.setOption({
            color: ['#6989c6', '#00c198', '#c43b75'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            
                    type : 'shadow'    
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data:['总分', '得分', '失分'],
                height: 400,
            },
            grid: {
                x: 150,
                y: 40,
                x2: 30,
                y2: 20
            },
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    axisTick : {show: false},
                    data : list,
                    axisLabel :{  //倾斜Y轴字体，防止字体显示不全
                        interval: 0,
                        rotate: -40     
                    }
                }
            ],
            series : [
                {
                    name:'总分',
                    type:'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    data:[320, 302, 341, 374, 390, 450, 420, 220 ,330]
                },
                {
                    name:'得分',
                    type:'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    },
                    data:[200, 170, 240, 244, 200, 220, 210, 100, 100]
                },
                {
                    name:'失分',
                    type:'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'left'
                        }
                    },
                    data:[-120, -132, -101, -134, -190, -230, -210, -120, -230]
                }
            ]
          })
      }
      /*因为知识点条数不固定，所以每次初始化图表前，先初始化高度*/
      function _initChartHeight(list) {
        if(!list) return;
        var itemHeight = 50;
        document.getElementById('knowledgeChart').style.height = (70 * list.length)+'px';
      }
      _initChartHeight(list);
      drawKnowledgeChart();
	</script>
</body>
</html>